<template>
  <div class="container evaluat">
    <ul class="evaluation_list">
      <li class="eva_item"
          v-for="(item, i) in evaluat_list"
          :key="i">
        <div class="userInfo clearfix">
          <div class="left clearfix">
            <div class="user_logo">
              <img :src="item.headimgurl==''?defaultImg:imgUrl+item.headimgurl"
                   alt
                   mode="widthFix"
                   class="img">
            </div>
            <div class="user_board">
              <h3>{{item.user_name}} {{item.nickname}}</h3>
              <!-- 时间 -->
              <div class="right"
                   v-if="item.time">{{item.time}}</div>
            </div>
          </div>
          <div class="score">
            <!-- 星级 -->
            <img v-if="item.star>=1"
                 src="https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png"
                 mode="widthFix"
                 class="star">
            <img v-if="item.star>=2"
                 src="https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png"
                 mode="widthFix"
                 class="star">
            <img v-if="item.star>=3"
                 src="https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png"
                 mode="widthFix"
                 class="star">
            <img v-if="item.star>=4"
                 src="https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png"
                 mode="widthFix"
                 class="star">
            <img v-if="item.star>=5"
                 src="https://h5.ameimeika.com/mp_images/star/pingxing-liang@2x.png"
                 mode="widthFix"
                 class="star">
            <span class="num">{{item.star}}分</span>
          </div>
        </div>
        <div class="eva_content">{{item.contents}} {{item.comment}}</div>
        <ul class="img_list clearfix"
            v-if="item.image_arr[0]">
          <li class="img_item"
              v-for="(value, index) in item.image_arr"
              :key="index"
              @click="image_preview(item,index)">
            <img :src="imgUrl+value"
                 v-if="imgUrl&&value"
                 alt
                 mode="widthFix"
                 class="img">
            <span class="tip"
                  v-if="item.total_image>3 && index==2">{{item.total_image}}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
// 父组件在子组件通过evaluat_list进行传值
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response
    };
  },
  methods: {
    image_preview (item, index) {
      let arr = item.image_arr,
        arr1 = [];
      arr.forEach(val => {
        val = this.imgUrl + val;
        arr1.push(val);
      });
      wx.previewImage({
        current: arr1[index], // 当前显示图片的http链接
        urls: arr1 // 需要预览的图片http链接列表
      });
    }
  },
  props: {
    evaluat_list: ""
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  margin-top: 0 !important;
  .evaluation_list {
    background: #fff;
    .eva_item {
      padding: 10px 15px;
      border-bottom: solid 1px #eeeeee;
      .userInfo {
        position: relative;
        .left {
          float: left;
          .user_logo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #cccccc;
            float: left;
            margin-top: 3px;
            .img {
              width: 100%;
              border-radius: 50%;
            }
          }
          .user_board {
            float: left;
            margin-left: 10px;
            h3 {
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
            .right {
              font-size: 10px;
              margin-top: 2px;
              font-family: "PingFangSC-Medium";
              color: rgba(136, 136, 136, 1);
            }
          }
        }

        .score {
          // float: right;
          position: absolute;
          right: 10px;
          top: 0;
          text-align: right;
          .star {
            width: 14px;
            height: 14px;
            padding: 0 2px;
            vertical-align: top;
          }
          .num {
            font-size: 10px;
            color: rgba(255, 147, 69, 1);
            margin-left: 3px;
            vertical-align: top;
          }
        }
      }
      .eva_content {
        font-size: 14px;
        color: rgba(136, 136, 136, 1);
        line-height: 20px;
        margin-top: 10px;
      }
      .img_list {
        height: 104px;
        margin-top: 10px;
        display: flex;
        columns: 3;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: hidden;

        .img_item {
          width: 102px;
          height: 102px;
          float: left;
          margin-right: 13.5px;
          position: relative;
          margin-bottom: 20px;
          overflow: hidden;
          .img {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .tip {
            display: block;
            width: 32px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-family: "PingFangSC-Medium";
            color: rgba(153, 153, 153, 1);
            border-radius: 8px;
            border: 1px solid rgba(151, 151, 151, 1);
            position: absolute;
            right: 6px;
            bottom: 6px;
            z-index: 999;
          }
        }
      }
    }
    .like {
      text-align: right;
      .img {
        width: 15px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
      }
    }
  }
}
</style>

